<template>
    <view class="content">
        <templat v-if="list && list.length > 0">
            <view class="wrapper">
                <view class="item" v-for="(item, index) in list" :key="index" @click="choose(item)">
                    <image :src="item.image" class="img"></image>
                    <image :src="item.isSelect ? '../../static/icon/choose.png' : '../../static/icon/cancel.png'" class="choose"></image>
                </view>
            </view>
            <view class="btn" @click="createPoster">生成海报</view>
        </templat>
        <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="list.length == 0">暂无相关信息</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                id: '',
                isShow: false,
            };
        },
        onLoad(option) {
            this.id = option.id
            this.getData()
        },
        methods: {
            // 生成海报最多选择6张
            createPoster(item) {
                let ids = []
                this.list.forEach(cur => {
                    if (cur.isSelect) {
                        ids.push(cur.id)
                    }
                })
                if (ids.length <= 0) {
                    this.$toast('至少选择一张图片！');
                    return
                }
                if (ids.length > 6) {
                    this.$toast('最多可以选择6张图片！');
                    return
                }
                this.$gTo('/pages/index/poster-details?ids=' + ids.join(',') + '&id=' + this.id)
            },
            
            // 选择图片
            choose(item) {
                item.isSelect = !item.isSelect
            },
            
            // 获取楼盘详情
            getData() {
                this.$ajax('properties_detail', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//楼盘id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.list = [...ret.detail.images, ...ret.detail.imgs]
                        this.list.forEach(cur => {
                            this.$set(cur, 'isSelect', false)
                        })
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx 10rpx;
    }
    .wrapper{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
    }
    .item{
        padding: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .img{
        width: 345rpx;
        height: 345rpx;
    }
    .choose{
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        top: 20rpx;
        right: 20rpx;
    }
    
    
    .btn{
        font-size: 36rpx;
        color: #fff;
        font-size: 30rpx;
        margin: 40rpx 20rpx;
        padding: 20rpx 70rpx;
        text-align: center;
        background-color: #00a1e9;
        border-radius: 50rpx;
    }

</style>
